<template>
  <div class="evaluate">
    <div class="doctor-msg">
      <img v-lazy="getImageUrl(doctorInfo.avatar, doctorInfo.sex || 0)" class="doctor-avatar" alt />
      <div class="detail-msg">
        <p>{{doctorInfo.nickname}}</p>
        <p>{{doctorInfo.visitSubordinate}} {{doctorInfo.job}}</p>
      </div>
    </div>
    <div class="evaluate-content">
      <p class="title">请对此次服务做出评价:</p>
      <Rate v-model="evaluate.source" />
      <Field
        v-model="evaluate.content"
        autosize
        label="评价"
        type="textarea"
        maxlength="200"
        placeholder="请输入评价内容"
        show-word-limit
      />
      <Button type="primary" round @click="onSubmit">提交评价</Button>
    </div>
  </div>
</template>

<script>
import { getImageUrl, submitEva } from '@/api/api'
import { Rate, Field, Button } from 'vant'
export default {
  data() {
    return {
      doctorInfo: {},
      inquiryid: '',
      evaluate: {
        source: 5,
        content: ''
      }
    }
  },
  components: {
    Rate,
    Field,
    Button
  },
  created() {
    const { doctor, inquiryid } = this.$route.query
    this.doctorInfo = doctor
    this.inquiryid = inquiryid
  },
  methods: {
    getImageUrl,
    onSubmit() {
        // 提交评价
        submitEva(this.inquiryid, this.evaluate).then(res => {
            if (res.code === 200) {
                this.$toast.success('评价成功')
                this.$router.go(-1)
            }
        })
    }
  }
}
</script>

<style lang="scss">
.evaluate {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  display: flex;
  flex-direction: column;
  padding: 0 0.2rem;
  box-sizing: border-box;
  .doctor-msg {
    width: 1.2rem;
    margin: 0.2rem auto;
    text-align: center;
    .doctor-avatar {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin-bottom: 0.1rem;
      border: 1px solid #ccc;
    }
    .detail-msg {
      p {
        line-height: 0.24rem;
        font-size: 13px;
      }
    }
  }
  .evaluate-content {
    .title {
      font-size: 13px;
      margin-bottom: 0.2rem;
    }
    .van-cell{
        margin: 0.2rem 0;
    }
    .van-button{
        float: right;
    }
  }
}
</style>
